import Vue from 'vue'
import VueRouter from 'vue-router'

// 导入登录的组件页面
import Login from '@/views/Login/Login.vue'
// 导入 Main 主页
import Main from '@/views/Main/Main.vue'
// 导入 Home 和 User 两个子路由组件
import Home from '@/views/Main/Home.vue'
import User from '@/views/Main/User.vue'
import Search from '@/views/Search/Search.vue'
import SearchResult from '@/views/Search/SearchResult.vue'

Vue.use(VueRouter)

// 路由规则的数组
const routes = [
  // 带有 name 属性的路由规则，叫做 “命名路由”
  { path: '/login', component: Login, name: 'login' },
  // 主页的路由规则
  {
    path: '/',
    component: Main,
    // 规则：如果通过 children 加载了默认子路由，则父路由规则不需要加 name 属性
    // name: 'main',
    children: [
      // 子路由规则，path 为空字符串的子路由规则，叫做“默认子路由”
      { path: '', component: Home, name: 'home' },
      // 注意：子路由规则，不建议以 / 开头
      { path: 'user', component: User, name: 'user' }
    ]
  },
  // 搜索页面的路由的规则
  { path: '/search', component: Search, name: 'Search' },
  // 搜索结果页
  { path: '/search/:kw', component: SearchResult, name: 'search-result', props: true }
]

const router = new VueRouter({
  routes
})

export default router

// 1. 学习分析问题的思维方式，模仿老师思考问题的方式，变成自己的！
// 2. 自己制造的 bug，尽量能够通过自己的调试，找到原因，并解决掉！
// 3. 学习自己看文档的能力！
